<template>
	<view class="shoppingCart" :style="{'padding-top':`${headHight}upx`}">
		<view class="head_box">
			<uni-nav-bar color="#333333" backgroundColor="#ffffff" title="购物车" :rightText="isManage?'退出管理':'管理'"
				:statusBar="true" :border="false" @clickRight="manageCart">
			</uni-nav-bar>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="item_l">
					<view class="is_select" v-if="item.select" @click.stop="handleSelect(index,0)">
						<uni-icons type="checkmarkempty" color="#FFF" size="10"></uni-icons>
					</view>
					<view class="no_select" v-else @click.stop="handleSelect(index,1)"></view>
				</view>
				<view class="goods_img">
					<image :src="item.pic" mode=""></image>
				</view>
				<view class="item_r">
					<view class="title">{{item.name}}</view>
					<view class="param">
						规格：{{item.guigeName}}
					</view>
					<view class="item_r_b">
						<view class="price">
							<text>￥</text>
							<text class="num">{{item.sell_price}}</text>
						</view>
						<view class="num">
							<view class="">
								<view class="num_btn" @click="reduceCount(item,index)">-</view>
								<view class="count">{{item.num}}</view>
								<view class="num_btn" @click="addCount(item,index)">+</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-center addressImgBox" v-if="list.length==0">
				<image src="https://wx.2024csnl.com/static/noData.png"></image>
				暂无数据~
			</view>

		</view>
		<view class="total">
			<view class="all_checked">
				<view class="is_select" v-if="isAll" @click="handleAllChecked(0)">
					<uni-icons type="checkmarkempty" color="#FFF" size="10"></uni-icons>
				</view>
				<view class="no_select" v-else @click="handleAllChecked(1)"></view>
				<view class="all_text">全选</view>
			</view>
			<view class="total_money" v-if="!isManage">
				<view class="">合计:</view>
				<view class="money">￥{{totalMoney}}</view>
			</view>
			<view class="total_money" v-if="isManage">
				<view class=""></view>
				<view class="money"></view>
			</view>
			<view class="pay_btn" style="background-color: red;" @click="handleDel" v-if="isManage">删除</view>
			<view class="pay_btn" @click="handlePay" v-else>去结算</view>
		</view>
	</view>
</template>

<script>
	import {
		getShoppingCar,
		operateSubAndaddShoppingCar,
		delShoppingCar,
	} from "../../api/index.js"
	export default {
		data() {
			return {
				cartlist: [],
				list: [],
				count: 0,
				isAll: false,
				selectGoods: [],
				totalPrice: 0,
				isManage: false,
				headHight: 0
			};
		},
		computed: {
			totalMoney() {
				let totalMoney = 0;
				this.selectGoods.forEach(item => {
					totalMoney += item.sell_price * item.num;
				});
				return totalMoney.toFixed(2);
			},
		},
		onShow() {
			this.onGetShoppingCar()
		},
		methods: {
			// 去结算
			async handlePay() {
				let arr = []
				this.selectGoods.forEach(item => {
					arr.push(`${item.productId},${item.guigeId},${item.num}`)
				});
				this.onSkip(`/pages/goods/carOrderDetail?prodata=${arr.join('-')}`)
				// console.log(arr.join('-'),'999')
				this.isAll=false
				this.selectGoods=[]
			},
			// 全选
			handleAllChecked(status) {
				this.isAll = status;
				this.list.forEach(item => {
					item.select = true;
				});
				if (status) {
					this.selectGoods = []
					this.selectGoods = this.list;
					// console.log(this.selectGoods, "权限", status)
				} else {
					this.selectGoods = [];
				}
			},
			// 删除
			async handleDel() {
				console.log(this.selectGoods, "22222")
				let res = []
				this.selectGoods.forEach(item => {
					let cur_index = this.list.findIndex(v => {
						return item.cartId == v.cartId
					});
					if (cur_index != -1) {
						res.push(this.list[cur_index].cartId)
						console.log(cur_index, "sss", res.join(','))
						this.onDelShoppingCar(res.join(','))
					}
				})
			},
			// 删除购物车产品
			async onDelShoppingCar(id) {
				const res = await delShoppingCar('s=/ApiShop/cartdelete', {
					id: id
				})
				const {
					status,
					msg,
					data
				} = res.data
				this.showToast(msg)
				if (status == 1) {
					setTimeout(() => {
						this.isAll = false
						this.onGetShoppingCar()
					}, 2000)
				}
			},
			// 加减数量
			async setOperateSubAndaddShoppingCar(id, num) {
				const res = await operateSubAndaddShoppingCar('s=/ApiShop/cartChangenum', {
					id: id,
					num: num
				})
				const {
					status,
					msg,
					data
				} = res.data
				if (status == 1) {
					this.onGetShoppingCar()
				} else {
					this.showToast(msg)
				}

			},
			// 减
			async reduceCount(item, index) {
				if (item.num > 1) {
					this.$set(this.list[index], 'num', item.num - 1);
					this.setOperateSubAndaddShoppingCar(item.cartId, item.num)
				} else if (item.num == 1) {
					this.showToast('该产品已经不能再减少啦~')
				} else {
					this.$delete(this.list, index)
					this.setOperateSubAndaddShoppingCar(item.cartId, item.num)
				}
				// console.log(item, "item--", item.num, )
			},
			// 加
			async addCount(item, index) {
				this.$set(this.list[index], 'num', item.num + 1);
				this.setOperateSubAndaddShoppingCar(item.cartId, item.num)
			},
			// 购物车列表
			async onGetShoppingCar() {
				const res = await getShoppingCar('s=/ApiShop/cart')
				const {
					status,
					msg,
					data
				} = res.data
				if (status == 1) {
					this.cartlist = data.cartlist
					const arr = []
					data.cartlist.forEach(item => {
						item.prolist.forEach((v, idx) => {
							console.log(v)
							const {
								num,
								name,
								product,
								guige,
								id
							} = v
							let obj = {
								cartId: id,
								bid: item.bid,
								num: num,
								name: product.name,
								// sell_price: product.sell_price,
								sell_price: v.guige.sell_price,
								pic: product.pic,
								productId: product.id,
								guigeId: guige.id,
								guigeName: guige.name,
								select: false
							}
							console.log( product.sell_price,)
							arr.push(obj)
						})
					})
					this.list = arr.flat(1)
					// console.log(data, "***", this.list)
				} else {
					this.showToast(msg)
				}
			},
			manageCart() {
				this.isManage = !this.isManage;
				this.isAll = false;
				this.selectGoods = [];
				this.list.forEach(item => {
					item.select = 0;
				});
			},
			handleSelect(index, status) {
				this.$set(this.list[index], 'select', status);
				let selectGoods = [];
				this.list.forEach(item => {
					if (item.select) {
						selectGoods.push(item);
					}
				});
				this.selectGoods = selectGoods;
				selectGoods.length && selectGoods.length == this.list.length ? this.isAll = true : this.isAll = false
			},
		},
		onLoad() {
			this.$nextTick(() => {
				uni.createSelectorQuery().in(this).select('.head_box').boundingClientRect(data => {
					this.headHight = 750 / data.width * data.height + 20
				}).exec()
			})
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.addressImgBox {
		flex-direction: column;
		color: #999;
		padding-top: 20%;

		image {
			width: 400rpx;
			height: 400rpx;
		}
	}

	.shoppingCart {
		.head_box {
			width: 100%;
			background-color: #fff;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999999;
		}

		.list {
			.item {
				width: 100%;
				height: 226upx;
				padding: 26upx 34upx;
				box-sizing: border-box;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1upx solid #f5f5f5;

				.item_l {
					.is_select {
						width: 36upx;
						height: 36upx;
						border-radius: 50%;
						background-color: #41644A;
						display: flex;
						justify-content: center;
						align-items: center;
						border: 2upx solid #F0F0F0;
					}

					.no_select {
						width: 36upx;
						height: 36upx;
						border-radius: 50%;
						border: 2upx solid #F0F0F0;
					}
				}

				.goods_img {
					margin: 0 18upx;

					>image {
						width: 172upx;
						height: 172upx;
						border-radius: 12upx;
					}
				}

				.item_r {
					height: 100%;
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						color: #666;
						font-size: 24upx;
						font-weight: 500;
						line-height: 42rpx;
						margin-bottom: 20upx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.param {
						font-size: 24upx;
						color: #B3B3B3;
						flex: 1;
					}

					.item_r_b {
						display: flex;
						justify-content: space-between;
						align-items: flex-end;

						.price {
							color: #F41717;
							font-size: 24upx;
							display: flex;
							align-items: center;

							.num {
								font-size: 32upx;
								font-weight: bold;
							}
						}

						.num {
							display: flex;
							justify-content: flex-end;

							>view {
								display: flex;
								align-items: center;
								border: 1upx solid #E6E6E6;
								border-radius: 6upx;
								overflow: hidden;

								.num_btn {
									width: 46upx;
									height: 46upx;
									text-align: center;
									line-height: 46upx;
									font-size: 40upx;
								}

								.count {
									width: 64upx;
									height: 46upx;
									text-align: center;
									line-height: 46upx;
									border-right: 1upx solid #E6E6E6;
									border-left: 1upx solid #E6E6E6;
									font-size: 28upx;
									font-weight: bold;
								}
							}
						}
					}
				}
			}
		}

		.total {
			width: 100%;
			height: 92upx;
			background-color: #fff;
			position: fixed;
			left: 0;
			// #ifdef APP-PLUS 
			bottom: 0;
			//  #endif 
			// #ifdef H5
			bottom: 100rpx;
			//  #endif 
			z-index: 9;
			display: flex;
			align-items: center;

			.all_checked {
				display: flex;
				align-items: center;
				padding-left: 24upx;

				.is_select {
					width: 36upx;
					height: 36upx;
					border-radius: 50%;
					background-color: #41644A;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 2upx solid #F0F0F0;
				}

				.no_select {
					width: 36upx;
					height: 36upx;
					border-radius: 50%;
					border: 2upx solid #F0F0F0;
				}

				.all_text {
					font-size: 26upx;
					margin-left: 16upx;
				}
			}

			.total_money {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24upx;

				.money {
					font-size: 32upx;
					color: #F41717;
					font-weight: bold;
				}
			}

			.pay_btn {
				width: 186upx;
				height: 100%;
				background-color: #41644A;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26upx;
				color: #fff;
			}
		}
	}
</style>
